<template>
  <form 
    :class="[
      'bx-form',
      `bx-form--${layout}`,
      `bx-form--${size}`
    ]"
    @submit="handleSubmit"
  >
    <slot></slot>
  </form>
</template>

<script>
import { provide, reactive, ref } from 'vue'

export default {
  name: 'BxForm',
  props: {
    model: {
      type: Object,
      default: () => ({})
    },
    rules: {
      type: Object,
      default: () => ({})
    },
    layout: {
      type: String,
      default: 'vertical',
      validator: (value) => ['horizontal', 'vertical', 'inline'].includes(value)
    },
    size: {
      type: String,
      default: 'medium',
      validator: (value) => ['small', 'medium', 'large'].includes(value)
    },
    labelWidth: {
      type: [String, Number],
      default: 'auto'
    },
    labelAlign: {
      type: String,
      default: 'right',
      validator: (value) => ['left', 'right', 'top'].includes(value)
    },
    disabled: {
      type: Boolean,
      default: false
    },
    colon: {
      type: Boolean,
      default: true
    }
  },
  emits: ['submit', 'validate'],
  setup(props, { emit }) {
    const formItems = ref(new Map())
    
    const formContext = reactive({
      model: props.model,
      rules: props.rules,
      layout: props.layout,
      size: props.size,
      labelWidth: props.labelWidth,
      labelAlign: props.labelAlign,
      disabled: props.disabled,
      colon: props.colon,
      addField: (field) => {
        formItems.value.set(field.prop, field)
      },
      removeField: (prop) => {
        formItems.value.delete(prop)
      },
      validateField: async (prop) => {
        const field = formItems.value.get(prop)
        if (field) {
          return await field.validate()
        }
        return { valid: true }
      }
    })

    provide('bx-form', formContext)

    const validate = async () => {
      const results = []
      for (const [prop, field] of formItems.value) {
        const result = await field.validate()
        results.push({ prop, ...result })
      }
      
      const valid = results.every(result => result.valid)
      const errors = results.filter(result => !result.valid)
      
      emit('validate', { valid, errors })
      return { valid, errors }
    }

    const validateField = async (prop) => {
      return await formContext.validateField(prop)
    }

    const resetFields = () => {
      for (const [prop, field] of formItems.value) {
        field.reset()
      }
    }

    const clearValidation = (props) => {
      if (props) {
        const propArray = Array.isArray(props) ? props : [props]
        propArray.forEach(prop => {
          const field = formItems.value.get(prop)
          if (field) {
            field.clearValidation()
          }
        })
      } else {
        for (const [prop, field] of formItems.value) {
          field.clearValidation()
        }
      }
    }

    const handleSubmit = async (event) => {
      event.preventDefault()
      const result = await validate()
      emit('submit', { ...result, model: props.model })
    }

    return {
      validate,
      validateField,
      resetFields,
      clearValidation,
      handleSubmit
    }
  }
}
</script>

<style scoped>
.bx-form {
  font-family: var(--bx-font-family);
}

.bx-form--horizontal {
  /* 水平布局样式 */
}

.bx-form--vertical {
  /* 垂直布局样式 */
}

.bx-form--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bx-spacing-md);
  align-items: flex-start;
}

.bx-form--small {
  font-size: 13px;
}

.bx-form--medium {
  font-size: 14px;
}

.bx-form--large {
  font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .bx-form--inline {
    flex-direction: column;
    gap: var(--bx-spacing-sm);
  }
}
</style>

